<!--
 * @Description: 
 * @Author: xiao li
 * @Date: 2020-07-21 20:23:44
 * @LastEditTime: 2022-04-12 17:45:13
 * @LastEditors: xiao li
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> 
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<meta name="referrer" content="never">

		<title>监控详情</title>
    <script src="./ezuikit.js"></script>
    <script src="../js/jquery.min.js"></script>
    <style>
      body{
        padding: 0;
        margin: 0;
        font-size: 15px;
      }

      .page-main{
        width: 100%;
        height: auto;
        margin: 0 auto;
      }
      #video-container{
        width: 100%;
        height: 40vh;
      }

      .flex-center{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .mt-lg{
        margin-top: 30px;
      }
      .text{
        color: #999;
      }
      .console-bg{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 20px solid #f4f6f8;
      }
      .center{
        width: 30px;
        height: 30px;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -15px;
        border: 2px solid #eee;
        border-radius: 50%;
      }
      .top{
        width: 10px;
        height: 10px;
        top: 0%;
        left: 50%;
        margin-top: 10px;
        margin-left: -5px;
        border-width: 2px 0 0 2px;
        border-color: #999;
        border-style: solid;
        transform: rotate(45deg);
      }
      
      .bottom{
        width: 10px;
        height: 10px;
        bottom: 0%;
        left: 50%;
        margin-bottom: 10px;
        margin-left: -5px;
        border-width: 0 2px 2px 0;
        border-color: #999;
        border-style: solid;
        transform: rotate(45deg);
      }
      
      .left{
        width: 10px;
        height: 10px;
        top: 50%;
        left: 50%;
        margin-top: -5px;
        margin-left: -65px;
        border-width: 0 0 2px 2px;
        border-color: #999;
        border-style: solid;
        transform: rotate(45deg);
      }
      
      .right{ 
        width: 10px;
        height: 10px;
        top: 50%;
        right: 50%;
        margin-top: -5px;
        margin-right: -65px;
        border-width: 2px 2px 0 0;
        border-color: #999;
        border-style: solid;
        transform: rotate(45deg);
      }
      .rel{
        position: relative;
      }
      .abs{
        position: absolute;
      }

    </style>
</head>
<body>
  <div class="page-main">
    <div id="video-container">
    </div>
    <div class="flex-center mt-lg">
      <div class="text">请通过操控云台来调整摄像机视角</div>
    </div>
    <div class="flex-center" style="margin-top: 50px;">
      <div class="console-bg rel">
        <div class="center abs"></div>
        <div class="top abs"></div>
        <div class="bottom abs"></div>
        <div class="left abs" data-key="left"></div>
        <div class="right abs"></div>
      </div>
    </div>
  </div>
  <script>
    let _href = window.location.href
    let url = _href.split('/monitor/index.html?')[0]
    let {0:id,1:uniacid} = _href.split('/monitor/index.html?')[1].split('&')
    let ajax_url = `${url}/index.php?i=${uniacid}&m=farm&s=`
    let player = null
		$(function() {
      $.ajax({
					type: 'get',
					url: `${ajax_url}farm/app/Index/getMonitorInfo`,
					dataType: 'json',
					data: {
            id
					},
					success: function(data) {
            let {token:accessToken,url} = data.data
            player = new EZUIKit.EZUIKitPlayer({
              id: 'video-container', // 视频容器ID
              accessToken,
              url: 'ezopen://open.ys7.com/J59194950/1.hd.live',
              autoplay: true ,
              audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
              plugin: ['talk'],                       // 加载插件，talk-对讲
              openSoundCallBack: (data) => console.log("开启声音回调",data),
              closeSoundCallBack: (data) => console.log("关闭声音回调",data),
              startSaveCallBack: (data) => console.log("开始录像回调",data),
              stopSaveCallBack: (data) => console.log("录像回调",data),
              capturePictureCallBack: (data) => console.log("截图成功回调",data),
              fullScreenCallBack: (data) => console.log("全屏回调",data),
              getOSDTimeCallBack: (data) => console.log("获取OSDTime回调",data),
              handleSuccess: (data) = function(){console.log("播放成功回调",data)},
              handleError: (data) => console.log("播放失败回调",data),
            }) 
					}
				})
    })

    let timeOutEvent = 0
    $('.top').on({
      touchstart: function(e){
        timeOutEvent = setTimeout(()=>{
          toChangeItem(1,0)
     }, 1000);
        return false
      },
      touchmove: function(e){
        console.log('touchmove top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      },
      touchend: function(e){
        console.log('touchend top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      }
    })
    $('.bottom').on({
      touchstart: function(e){
        timeOutEvent = setTimeout(()=>{
          toChangeItem(1,1)
     }, 1000);
        return false
      },
      touchmove: function(e){
        console.log('touchmove top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      },
      touchend: function(e){
        console.log('touchend top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      }
    })
    
    $('.left').on({
      touchstart: function(e){
        timeOutEvent = setTimeout(()=>{
          toChangeItem(1,2)
     }, 1000);
        return false
      },
      touchmove: function(e){
        console.log('touchmove top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      },
      touchend: function(e){
        console.log('touchend top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      }
    })
    
    $('.right').on({
      touchstart: function(e){
        timeOutEvent = setTimeout(()=>{
          toChangeItem(1,3)
     }, 1000);
        return false
      },
      touchmove: function(e){
        console.log('touchmove top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      },
      touchend: function(e){
        console.log('touchend top===')
        clearTimeout(timeOutEvent)
        toChangeItem(2)
      }
    }) 
    
    function toChangeItem(type, direction) {
      timeOutEvent = 0
      let method = type === 1 ? 'ysStartTurn' :'ysStopTurn'
      $.ajax({
					type: 'get',
					url: `${ajax_url}farm/app/Index/${method}`,
					dataType: 'json',
					data: type === 1 ? {
            id,
            direction
					} : {id},
					success: function(data) {
            console.log(data,'==========toChangeItem')
          }
      })
    }
  </script>
</body>
</html>